<template>
    <div class="Edit">
        <el-dialog title="设置排序" v-model="props.visible" :before-close="beforeClose">
            <div class="top">
                <el-input v-model="txtValue" style="width: 200px;" placeholder="专题名称搜索"></el-input>
                <button @click="onSerch" class="button" style="width: 50px;height: 30px;">
                    <el-icon>
                        <Search />
                    </el-icon>
                </button>
            </div>
            <el-table :data="tableData" ref="multipleTableRef" border style="width: 100%">
                <el-table-column type="selection" width="60" />
                <el-table-column prop="title" label="专题名称" width="530">

                </el-table-column>
                <el-table-column prop="categoryName" property="name" label="所属分类" width="160" />
                <el-table-column prop="createTime" property="address" label="添加时间" show-overflow-tooltip width="160" />
            </el-table>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="qx">取消</el-button>
                    <el-button @click="suer" type="primary">
                        确定
                    </el-button>
                </div>
            </template>

            <!-- 分页器 -->
            <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
                :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import * as api from '../../../json/request/api'
import useTable from "../../../hooks/useTables";
let txtValue = ref('')
let {
    tableData,
    getTableData,
    pagination,
    handleSizeChange,
    handleCurrentChange,
} = useTable(api.admin.ZtQQ, {
    keyword: txtValue, // name 是响应式的
});
let props = defineProps<{
    visible: boolean
}>()
getTableData()
// 搜索

let onSerch = async () => {
    // console.log(txtValue.value);

    getTableData();
}

let emits = defineEmits<
    {
        (event: 'cancel'): void;
        (event: 'sure'): void;
    }
>()


// 取消
let qx = () => {
    emits('cancel')
}
// 确定
let suer = () => {
    emits('sure')
}
// 
let beforeClose = () => {
    emits('cancel')
}
</script>

<style scoped lang="scss">
.el-input__wrapper {
    border-radius: 0 0 0 0;
}

.button {
    border: 1px solid #ccc;
    transform: translateY(2px);
}

.top {
    margin-bottom: 15px;
}

.el-pagination {
    margin-top: 20px;
    transform: translateX(425px);
}
</style>